<template>
  <div class="environment-container">
    <!-- <div class="chart" id="chart_left2"> -->
    <div class="chartList">
      <div id="container1" class="cell">
        <amTemp />
      </div>
      <div id="container2" class="cell">
        <temp />
      </div>
      <div id="container3" class="cell">
        <humidity />
      </div>
      <div id="container4" class="cell">
        <co2 />
      </div>
      <div id="container5" class="cell">
        <lightIntensity />
      </div>
      <div id="container6" class="cell">
        <ph />
      </div>
    </div>
  </div>
</template>

<script>
import amTemp from "./environment/amTemp";
import temp from "./environment/temp";
export default {
  name: "environment",
  components: {
    amTemp,
    temp,
  },
  data() {
    return {};
  },
  mounted() {
    // this.getEchartLeft2();
  },
  // methods: {
  // getEchartLeft2() {
  // 实例化对象
  // let myChart = echarts.init(document.getElementById("chart_left2"));
  // let myChart1 = echarts.init(document.getElementById("container1"));
  // let myChart2 = echarts.init(document.getElementById("container2"));
  // let myChart3 = echarts.init(document.getElementById("container3"));
  // let myChart4 = echarts.init(document.getElementById("container4"));
  // let myChart5 = echarts.init(document.getElementById("container5"));
  // let myChart6 = echarts.init(document.getElementById("container6"));

  // let xData = ["环境温度", "温度", "湿度", "CO2浓度", "光照强度", "PH值"];

  // // 指定配置和数据
  // let option = {
  // tooltip: {
  //   trigger: "item",
  // },
  // xAxis: {
  //   type: "category",
  //   data: xData,
  //   axisLabel: {
  //     interval: 0,
  //     color: "#4c9bfd",
  //   },
  //   axisTick: {
  //     // alignWithLabel: false,
  //     // 把x轴的刻度隐藏起来
  //     show: false,
  //   },
  // },
  // yAxis: {
  //   type: "value",
  //   show: false,
  // },
  // series: [
  //   {
  //     data: [320, 300, 150, 280, 70, 410],
  //     type: "bar",
  //     itemStyle: {
  //       normal: {
  //         color: function (params) {
  //           var colorList = [
  //             "#ee4065",
  //             "#2196f4",
  //             "#6ccc00",
  //             "#f9cb00",
  //             "#c065ff",
  //             "#41daea",
  //           ];
  //           return colorList[params.dataIndex];
  //         },
  //         label: {
  //           show: true, //开启显示数值
  //           position: "top", //数值在上方显示
  //           textStyle: {
  //             //数值样式
  //             color: "#D1DBFF", //字体颜色
  //             fontSize: 14, //字体大小
  //           },
  //         },
  //       },
  //     },
  //     barWidth: 30,
  //   },
  // ],

  //       tooltip: {
  //         formatter: "{a} <br/>{b} : {c}",
  //       },
  //       toolbox: {
  //         feature: {
  //           restore: {},
  //           saveAsImage: {},
  //         },
  //       },
  //       series: [
  //         {
  //           name: "当前坏境",
  //           type: "gauge",
  //           min: 0,
  //           max: 40,
  //           detail: { formatter: "{value}℃" },
  //           data: [{ value: 26, name: "环境温度" }],
  //           axisLine: {
  //             lineStyle: {
  //               color: [
  //                 [0.5, "#4dabf7"],
  //                 [0.65, "#69db7c"],
  //                 [0.8, "#ffa94d"],
  //                 [1, "#ff6b6b"],
  //               ],
  //             },
  //           },
  //         },
  //         {
  //           name: "当前坏境",
  //           type: "gauge",
  //           min: 0,
  //           max: 40,
  //           detail: { formatter: "{value}℃" },
  //           data: [{ value: 55, name: "土壤温度" }],
  //           axisLine: {
  //             lineStyle: {
  //               color: [
  //                 [0.5, "#4dabf7"],
  //                 [0.65, "#69db7c"],
  //                 [0.8, "#ffa94d"],
  //                 [1, "#ff6b6b"],
  //               ],
  //             },
  //           },
  //         },
  //         {
  //           name: "当前坏境",
  //           type: "gauge",
  //           min: 0,
  //           max: 40,
  //           detail: { formatter: "{value}" },
  //           data: [{ value: 33, name: "湿度" }],
  //           axisLine: {
  //             lineStyle: {
  //               color: [
  //                 [0.5, "#4dabf7"],
  //                 [0.65, "#69db7c"],
  //                 [0.8, "#ffa94d"],
  //                 [1, "#ff6b6b"],
  //               ],
  //             },
  //           },
  //         },
  //         {
  //           name: "当前坏境",
  //           type: "gauge",
  //           min: 0,
  //           max: 40,
  //           detail: { formatter: "{value}" },
  //           data: [{ value: 66, name: "CO2浓度" }],
  //           axisLine: {
  //             lineStyle: {
  //               color: [
  //                 [0.5, "#4dabf7"],
  //                 [0.65, "#69db7c"],
  //                 [0.8, "#ffa94d"],
  //                 [1, "#ff6b6b"],
  //               ],
  //             },
  //           },
  //         },
  //         {
  //           name: "当前坏境",
  //           type: "gauge",
  //           min: 0,
  //           max: 40,
  //           detail: { formatter: "{value}" },
  //           data: [{ value: 46, name: "光照强度" }],

  //           axisLine: {
  //             lineStyle: {
  //               color: [
  //                 [0.5, "#4dabf7"],
  //                 [0.65, "#69db7c"],
  //                 [0.8, "#ffa94d"],
  //                 [1, "#ff6b6b"],
  //               ],
  //             },
  //           },
  //         },
  //         {
  //           name: "当前坏境",
  //           type: "gauge",
  //           min: 0,
  //           max: 40,
  //           detail: { formatter: "{value}" },
  //           data: [{ value: 5, name: "PH值" }],
  //           axisLine: {
  //             lineStyle: {
  //               color: [
  //                 [0.5, "#4dabf7"],
  //                 [0.65, "#69db7c"],
  //                 [0.8, "#ffa94d"],
  //                 [1, "#ff6b6b"],
  //               ],
  //             },
  //           },
  //         },
  //       ],
  //     };

  //     option.series[0].data[0].value;
  //     option.series[0].data[0].name;
  //     myChart1.setOption(option, true);

  //     option.series[1].data[0].value;
  //     option.series[1].data[0].name;
  //     myChart2.setOption(option, true);

  //     option.series[2].data[0].value;
  //     option.series[2].data[0].name;
  //     myChart3.setOption(option, true);

  //     option.series[3].data[0].name;
  //     option.series[3].data[0].value;
  //     myChart4.setOption(option, true);

  //     option.series[4].data[0].name;
  //     option.series[4].data[0].value;
  //     myChart5.setOption(option, true);

  //     option.series[5].data[0].name;
  //     option.series[5].data[0].value;
  //     myChart6.setOption(option, true);

  //     // 把配置给实例对象
  //     // myChart.setOption(option, true);
  //     window.addEventListener("resize", () => {
  //       myChart1.resize();
  //       myChart2.resize();
  //       myChart3.resize();
  //       myChart4.resize();
  //       myChart5.resize();
  //       myChart6.resize();
  //       // myChart.resize();
  //     });
  //   },
  // },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.environment-container {
  // display: flex;
  // justify-content: flex-start; // space-between：两端对齐，子元素间隔相等 space-around：子元素两侧的间隔相等。
  // flex-wrap: wrap; //  wrap（向下换）
  // height: 3rem;
  // width: 100%;
  // .chart {
  //   height: 1.5rem;
  // }
  // .cell {
  //   flex: 1;
  //   float: left;
  //   width: 1.9rem;
  //   height: 1.5rem;
  //   border: 0px solid;
  // }
  // .dcell {
  //   clear: both;
  // }
  .chartList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .cell {
      // flex: 1;
      // float: left;
      width: 2rem;
      height: 1.5rem;
      border: 0px solid;
    }
  }
  .chartList:after {
    // 使用伪类元素占据单位，不影响页面
    content: "";
    width: 2rem;
    height: 0;
  }
}
</style>
